<template>
    <el-dialog class="elDialog" :title="wintitle" :visible.sync="isShow" width="88%" :lock-scroll="true" :close-on-click-modal="false">
        <div class="dialog">
            <div class="top">
                <zy-select :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm"></zy-select>
            </div>
            <div class="bottom">
                <zy-table :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage"></zy-table>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import zyTable from '@/components/common/zyTable.vue'
import zySelect from '@/components/common/zySelect.vue'
import { requestApi } from '@/requset/api'
import { formConfig1 } from './config'
export default {
    data() {
        return {
            formConfig: formConfig1,
            queryForm: {
                start_time: null,
                end_time: null,
            },
            addr: null,
            wintitle: '',
            isShow: false,
            tableData: [],
            page: 1,
            pagination: {
                pageSize: null,
            },
            tableColumn: null,
            device_id: null,
            isShow1: false,
            arr: [],
        }
    },
    components: { zyTable, zySelect },

    methods: {
        doOpen(obj) {

            this.tableColumn = obj.config
            this.addr = obj.addr
            this.isShow = true
            this.page = 1
            this.search()
        },
        getList(obj) {
            obj.page = this.page
            requestApi('post', 'device/oil/mysql', obj).then((res) => {

                if (res.data.code == 0) {
                    this.$set(this, 'tableData', res.data.data)
                    this.pagination = res.data.pagination
                }
            })
        },
        search() {

            this.getList({ addr: this.addr, page: this.page, ...this.queryForm })
        },
        resetForm() {
            this.page = 1
            this.queryForm = {
                start_time: null,
                end_time: null,
            }
            this.search()
        },
        changePage(e) {
            this.page = e
            this.search()
        },
    },
    created() {},
}
</script>

<style lang="less" scoped>
.elDialog {
    .dialog {
        width: 98%;
        height: 60vh;
        position: relative;
        .top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 60px;
        }
        .bottom {
            position: absolute;
            top: 60px;
            width: 100%;
            height: 50vh;
        }
    }
}
.track {
    width: 100px;

    margin-left: 10%;
    height: 200px;
    display: flex;
    flex-direction: column;
    z-index: 99;
    .item {
        margin-bottom: 40px;

        .label {
            font-size: 16px;
            color: rgb(181, 215, 246);
            font-weight: bold;
            margin-bottom: 10px;
        }
    }
}
</style>
